<template>
    <div class="addMsg">
        <div class="item" @click="clickBtn">
            <text class="name">设备类型:</text>
            <wx-button 
            height="100px"
            width="500px"
            borderRadius="0px"
            backgroundColor="#fff"
            textColor="rgba(62,175,252,1)"
            textFontSize="32px"
            @wxClick="visible=true" class="listItem">{{ selectedData.name }}</wx-button>
        </div>
        <SBXH v-on:sbxhEvent='sbxhEvent' />
        <SBLX v-on:event='event' />
        <div class="item">
            <text class="name">水泵型号:</text>
            <input class="value" type="text" placeholder="请在此处输入水泵型号" v-model="title"/>
        </div>
        <div class="item">
            <text class="name">设备序列号:</text>
            <input class="value" type="search" placeholder="设备序列号" v-model="xlhTitle"/>
        </div>
        <wx-popup 
            :visible="visible" 
            position="bottom"
            :hasOverley="true"
            height="488px"
            ref="wxPopup"
            @wxChange="handleBottom">
            <div>
                <div class="btn-wrap">
                    <text class="btn" @click="handleCancel">取消</text>
                    <text class="btn" @click="handleFinish">完成</text>
                </div>
                <wx-picker :data="data" :visible="visible" @wxChange="handleChange"></wx-picker>
            </div>
        </wx-popup>
        <div class="listItems">
            <button class="btnbar" @click="queryA"><text class="btnText">完成</text></button>
        </div>
    </div>
</template>
<script>
import { WxPicker, WxButton, WxPopup } from 'weex-droplet-ui';
import event from '@/net/event'
import { getCache, setCache } from '@/util/storageUtils'
import * as storage from '@/config/storageTypes'
import { CTCE_USER_INFO } from '@/config/storageTypes'
import SBXH from './SBXH'
import SBLX from './SBLX'
const PICKER_DATA = {
        list: [],
        defaultValue: { name: '请输入设备类型'},
        displayValue (item) {
            return item.name;
        }
    };

export default {
    name: 'addMsg',
    data(){
        return {
            data: PICKER_DATA,
            visible: false,
            selectedData: PICKER_DATA.defaultValue,
            sblxText: '', // 无线id
            sbxhText: '', // 设备类型id
            xh: '',
            xlh: '',
            title: '',
            xlhTitle: ''
        }
    },
    components: {
        WxPicker,
        WxButton,
        WxPopup,
        SBXH,
        SBLX
    },
    created(){
        this.clickBtn()
    },
    methods: {
        clickBtn() {
            getCache(CTCE_USER_INFO).then(res => {
                const user = JSON.parse(res)
                event.getAzSblx(user.gsdm).then(resData => {
                    if(resData.data.datalist.length = 1) {
                        resData.data.datalist[0].name = resData.data.datalist[0].SBLXMC
                        this.data.list.push(resData.data.datalist[0])
                        this.data.defaultValue.name = resData.data.datalist[0].name
                        setCache(storage.CTCE_AZCJDM_SBXH, JSON.stringify({
                            sbcjdm: resData.data.datalist[0].SBCJ,
                            sblx: resData.data.datalist[0].SBLX
                        }))
                    } 
                })
            })
        },
        handleBottom (visible) {
            this.visible = visible;
        },

        handleChange (data) {
            this.selectedData = data;
        },

        handleCancel () {
            this.$refs.wxPopup.hide();
        },

        handleFinish () {
            this.$refs.wxPopup.hide();
        },
        queryA() {
            this.$router.setBackParams({
                wx_id: this.sblxText, // 无线id（传输设备号）
                bz: this.title,
                bzxlh: this.xlhTitle,
                sblx_id: this.sbxhText.value, // 设备类型id
                sbxh: this.sbxhText.name,  // 设备型号(厂家设备)
                sblxmc: this.selectedData.name
            })
            this.$router.back()
        },
        event(msg) {
            this.sblxText = msg // 无线设备号
        },
        sbxhEvent(msg) {
            this.sbxhText = msg // 设备型号id
        },
    }
}
</script>
<style scoped>
.addMsg{
    width: 750px;
    margin-top: 20px;
}
.item{
    width: 750px;
    height: 100px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #fff;
}
.name{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
    padding-right: 20px;
}
.listItem{
    position: relative;
}
.value{
    display: block;
    width: 600px;
    height: 100px;
    font-size:25px;
    font-family:PingFangSC-Regular;
    /* color:rgba(62,175,252,1); */
    color:rgba(102,102,102,1);
    text-align: center;
}
.btn-wrap {
    background-color: #eee;
    height: 88px;
    font-size: 38px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.btn {
    line-height: 88px;
    height: 88px;
    width: 100px;
    text-align: center;
    color: #007aff;
    font-size: 32px;
}
.listItems{
    width: 750px;
    height: 100px;
    justify-content: center;
    align-items: center;
    margin-top: 44px;
}
.btnbar{
    width: 285px;
    height: 60px;
    border-radius: 10px;
    background-color: rgba(62,175,252,1);
    justify-content: center;
    align-items: center;
}
.btnText{
    color: #fff;
    font-size: 28px;
    font-family:PingFangSC-Regular;
}
</style>
